<template>
  <el-dialog title="签章" :close-on-click-modal="false" append-to-body :visible.sync="visible" lock-scroll width="600px"
    class="dioSty">
    <div>
      <el-row :gutter="20" v-if="rowState">
        <el-col :span="19" :offset="3">
          <div class="hinAllSty">
            <el-empty description="暂无印章" style="width: 100%;" v-if="cachetList.length < 1" />
            <div class="hinStyAll" v-for="item in cachetList" :key="item.id"
              :class="cachetState == item.id ? 'activeHinSty' : ''" @click="cutHinState(item)" v-else>
              <ImagePreview :src="item.signUrl" :width="80" :height="40" :listState="false" />
              <el-tooltip effect="dark" placement="bottom">
                <div slot="content" style="width:10rem">{{ item.name }}</div>
                <div class="ellipsisList">{{ item.name }}</div>
              </el-tooltip>
            </div>
          </div>
        </el-col>
        <el-col :span="21" :offset="2">
          <div class="hintSty">
            请用APP扫描二维码 进行签名 ,或者选择预存签名图
          </div>
        </el-col>
        <el-col :span="18" :offset="4">
          <div class="qrCodeSty">
            <div id="qrCode" ref="qrCode"></div>
          </div>
        </el-col>
        <el-col :span="21" :offset="18">
          <el-button type="primary" @click="cutRowState">选择签名</el-button>
        </el-col>

      </el-row>

      <!-- 选择签名 -->
      <el-row :gutter="20" v-else>
        <el-col :span="19" :offset="3">
          <div class="signAllSty">
            <el-empty description="暂无签名" style="width: 100%;" v-if="signList.length < 1" />
            <div class="signStyAll" v-for="item in signList" :key="item.id"
              :class="signState == item.id ? 'activeHinSty' : ''" @click="cutSignState(item)" v-else>
              <ImagePreview :src="item.signUrl" :width="100" :height="100" :listState="false" />
              <el-tooltip class="item" effect="dark" placement="top">
                <div slot="content" style="width:10rem">{{ item.name }}</div>
                <div class="ellipsisList">{{ item.name }}</div>
              </el-tooltip>
            </div>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="21" :offset="1">
          <el-button type="primary" style="width: 100%; margin-top: 20px;" @click="subDio">确定</el-button>
        </el-col>
        <el-col :span="21" :offset="1">
          <el-button style="width: 100%; margin-top: 20px;" @click="cancelDio">取消</el-button>
        </el-col>
      </el-row>
    </div>

  </el-dialog>
</template>
<script>
import QRCode from 'qrcodejs2'
import { getSignList } from '@/api/qrCode';
import { getInfo } from "@/api/login.js"
export default {
  data() {
    return {
      visible: false,
      detailVisible: false,
      loading: false,
      dataForm: {},
      facilityOptions: [],

      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      cachetList: [],
      signList: [],
      rowState: true,
      // 签章
      cachetState: 1,
      serviceOrgStamp: '',
      // 签名
      signState: 1,
      serviceOrgSign: ''

    };
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
  methods: {
    init(contractId) {
      this.visible = true;
      this.rowState = true
      this.$nextTick(() => {
        // 公章
        getSignList({ type: 2 }).then(res => {
          for (let i = 0; i < res.rows.length; i++) {
            if (res.rows[i].defaultSign) {
              this.serviceOrgStamp = res.rows[i].signUrl
              this.cachetState = res.rows[i].id
            }
          }
          this.cachetList = res.rows
        })
        // // 签名
        // getSignList({ type: 1 }).then(res => {
        //   this.signList = res.rows
        // })
        getInfo().then(res => {
          let text = {
            userId: res.user.userId,
            userType: res.user.userType,
            contractId,
            app: 'fire',
            page: 'contract'
          }
          this.$refs.qrCode.innerHTML = "";
          let qrcode = new QRCode(this.$refs.qrCode, {
            width: 255,
            height: 255, // 高度
            text: JSON.stringify(text),
            // text: text,
            correctLevel: QRCode.CorrectLevel.H //容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
          })
          qrcode._el.title = ''
        })
      });

    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    cutHinState(row) {
      // 服务机构印章图片地址
      this.serviceOrgStamp = row.signUrl
      this.cachetState = row.id
    },
    cutSignState(row) {
      // 服务机构签字图片地址
      this.serviceOrgSign = row.signUrl
      this.signState = row.id
    },
    cutRowState() {
      if (!this.serviceOrgStamp) {
        this.$modal.msgWarning('请选择印章');
      } else {
        // 签名
        getSignList({ type: 1 }).then(res => {
          for (let i = 0; i < res.rows.length; i++) {
            if (res.rows[i].defaultSign) {
              this.serviceOrgSign = res.rows[i].signUrl
              this.signState = res.rows[i].id
            }
          }
          this.signList = res.rows
          this.rowState = !this.rowState
        })
      }
    },
    // 取消
    cancelDio() {
      this.$emit('refreshClientSignature')
    },
    // 确定
    subDio() {
      if (!this.serviceOrgStamp) {
        this.$modal.msgWarning('请选择印章');
      } else if (!this.serviceOrgSign) {
        this.$modal.msgWarning('请选择签名');
      } else {
        if (this.serviceOrgStamp) {
          this.dataForm.customerStamp = this.serviceOrgStamp
        }
        if (this.serviceOrgSign) {
          this.dataForm.customerSign = this.serviceOrgSign
        }
        this.$nextTick(() => {
          this.$emit('refreshClientSignature', true, this.dataForm)
        })
      }
    }
  },
};
</script>
<style lang="scss" scoped>

.ellipsisList {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  /* 控制最多显示3行文字 */
  overflow: hidden;
  text-overflow: ellipsis;
  width: 80px;
  text-align: center;
}

.hinAllSty {
  width: 100%;
  min-height: 5rem;
  background: #fff;
  display: flex;
  border-radius: 0.5rem;
  overflow-x: auto;
  align-items: center;
}

.signAllSty {
  width: 100%;
  min-height: 15rem;
  background: #fff;
  display: flex;
  border-radius: 0.5rem;
  overflow-x: auto;
  align-items: center;

  .signStyAll {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem 0.5rem;
  }
}

.hinStyAll {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1rem 0.5rem;
  border-radius: 4px;
  border: 1px solid transparent;
}

.activeHinSty {
  border: 1px solid rgb(90, 156, 248);
}

.hintSty {

  width: 100%;
  height: 3rem;
  text-align: center;
  line-height: 3rem;
  color: darkorange;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
  margin: 0.5rem 0;
  border-radius: 0.5rem;

}

.qrCodeSty {
  width: 90%;
  height: 18rem;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
